<template>
	<view>
		<view
			style="width: 92vw;height: 80vh;margin-left: 3vw;background-color: #fff;border-radius: 10px;margin-top: 2vh;">
			<view style="width: 92vw;height: 12vh;display: flex;">
				<!-- 图片渲染 -->
				<view style="width: 20vw;height: 12vh;">
					<image :src="detailsList.image" mode="" style="width: 20vw;height: 12vh;"></image>
				</view>
				<!-- 详情描述1 -->
				<view style="width: 65vw;height: 12vh;">
					<view
						style="width: 62vw;padding-top: 3vh;padding-left: 2vw; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
						{{detailsList.content}}
					</view>
				</view>
			</view>
			<!-- 评分 -->
			<view style="width: 80vw;margin-left: 10vw;height: 8vh;display: flex;line-height: 8vh;font-size: 0.8rem;">
				描述相符:
				<uni-rate v-model="value" @change="onChange" style="margin-top: 2.5vh;" size="20" />
			</view>
			<!-- 输入框 -->
			<view style="width: 92vw;height:30vh;">
				<textarea placeholder="从多个角度评价宝贝,可以帮助更多想买的人" style="font-size: 0.8rem;padding-left: 2vw;"></textarea>
			</view>
			<view style="width: 90vw;display: flex;flex-wrap: wrap;">
				<!-- 上传的图片 -->
				<image v-for="(item,index) in imgList" :key="index" :src="item" mode="" style="width: 28vw;height: 16vh;"></image>

				<!-- 上传图片 -->
				<view
					style="width: 30vw;height: 16vh;background-color: #F1F1F1;margin-left: 2vw;border: dashed 1px #999;"
					@click="PicturesUploaded ">
					<!-- 上传图 图片 -->
					<view style="width: 30vw;height: 10vh;">
						<image src="../../../static/images/上传图片.png" mode=""
							style="width: 6vw;height: 4vh;margin-left: 12vw;margin-top: 5vh;"></image>
					</view>
					<view
						style="width: 30vw;height: 5vh;line-height: 5vh;text-align: center;line-height: 5vh;font-size: 0.5rem;">
						为宝贝拍买家秀</view>
				</view>
			</view>
			<!-- 提交按钮 -->
			<view @click="submit" style="border-radius: 20px; width: 20vw;height: 4vh;color: #fff;text-align: center;line-height: 4vh;margin-left: 40vw;margin-top: 2vh; background-color: #F0AD4E;">提交</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				imgList: [],
				detailsList: {
					state: 0,
					image: '../../../static/images/order-img.png',
					content: '简介简介简介简介简介简介简介简介简的环境安徽点那看来介简介接纳接简介简介',
					// 价格
					price: '158',
					//数量
					num: 1,
					// 优惠
					preference: '20'

				},

			}
		},
		methods: {
			// 评分
			onChange(e) {

				// console.log('rate发生改变:' + JSON.stringify(e))
			},
			// 上传图片
			PicturesUploaded() {
				// console.log(11)
				// console.log('上传图片'),
					uni.chooseImage({ //上传图片的内置方法
						count: 5, //在h5浏览器限制不住
						success: res => {
							// console.log(res.tempFilePaths)
							//返回的图片路径将它push到imgList中
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.imgList.push(res.tempFilePaths[i])
							}
							// console.log(this.imgList)
						}
					})
			},
			// 提交评价
			submit(){
				uni.navigateTo({
					url:'./Purchase-center'
				})
			}
		},
		// 接收传递过来的id
		onLoad(openid) {
			// console.log(openid.id)
		}
	}
</script>

<style>
</style>
